import React from 'react'

import { browserHistory } from 'react-router'
import {ButtonGroup,Row,Col,Button} from 'epm-ui'

export default class App extends React.Component {
    handleClick(link){
        browserHistory.push(link)
    }

    render() {
        return (
            <div style={{color: '#0070D2'}}>
                <h3 style={{padding:"20px"}}>路由例子</h3>
                <Row>
                    <Col size={2} style={{marginLeft:"20px"}}>
                        <ButtonGroup>
                            <Button onClick={() => {this.handleClick("/about")}}>about</Button>
                            <Button onClick={() => {this.handleClick("/repos")}}>repos</Button>
                            <Button onClick={() => {this.handleClick("/count")}}>count</Button>
                        </ButtonGroup>
                    </Col>
                    <Col size={9}>
                        <div style={{backgroundColor:'#ddd',height:'300px'}}>
                            {this.props.children}
                        </div>
                    </Col>
                </Row>
            </div>
        );
    }
}

